<template>
  <div class="box-container">
    <add-btn text="添加角色" @click.native="isShowDialog=true" />
    <roles-table
      :roles-list="rolesList"
      @delete="onDelete"
      @edit="getRoleData"
      @distribute="getCurrentPermission"
    />
    <!-- 添加删除角色对话框 -->
    <add-edit-dialog
      ref="addEditDialog"
      v-model="isShowDialog"
      @add-success="loadRolesList"
      @edit-success="loadRolesList"
    />
    <!-- 分配权限对话框 -->
    <assign-permissions
      v-model="isShowPermission"
      :role-id="roleId"
      :permission-tree-data="permissionTreeData"
      :current-permission-id="currentPermissionId"
      @success="loadRolesList"
    />
  </div>
</template>

<script>
import { getRolesList, deleteRole } from '@/api/role'
import { getPermissionData } from '@/api/rights'
import AddBtn from '@/components/AddBtn'
import RolesTable from './components/roles-table.vue'
import AddEditDialog from './components/AddEditDialog.vue'
import AssignPermissions from './components/AssignPermissions.vue'
export default {
  name: 'Roles',
  components: { AddBtn, RolesTable, AddEditDialog, AssignPermissions },
  data() {
    return {
      // 角色列表数据
      rolesList: [],
      isShowDialog: false,
      isShowPermission: false,
      // 存储所有权限列表树型数据
      permissionTreeData: [],
      // 存储当前用户权限id
      currentPermissionId: [],
      // 当前角色 ID
      roleId: 0
    }
  },
  created() {
    this.loadRolesList()
    this.loadPermissionData()
  },

  methods: {
    // 加载权限列表数据
    async loadRolesList() {
      const res = await getRolesList()
      this.rolesList = res
    },
    // 加载所有权限列表树型数据
    async loadPermissionData() {
      const res = await getPermissionData('tree')
      // 所有权限列表树型数据保存
      this.permissionTreeData = res
    },
    async getRoleData(id) {
      await this.$refs.addEditDialog.getRoleDataById(id)
      this.isShowDialog = true
    },
    // 点击删除
    onDelete(id) {
      this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await deleteRole(id)
        this.loadRolesList()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
      })
    },
    // 点击分配权限,获取当前用户的权限id数据
    async getCurrentPermission(id) {
      // await this.loadPermissionData()
      this.roleId = id
      const newArr = this.getPermissionId(this.rolesList.filter(item => item.id === id)[0].children)
      this.currentPermissionId = newArr.map(item => item.id)
      this.isShowPermission = true
      console.log(this.currentPermissionId)
    },
    // 递归获取children中的id数据
    getPermissionId(arr) {
      const newArr = []
      arr.forEach(item => {
        if (item.children && item.children.length !== 0) {
          newArr.push(...this.getPermissionId(item.children))
        } else {
          newArr.push(item)
        }
      })
      return newArr
    }
  }
}
</script>

<style scoped lang='scss'>

</style>
